<template>
  <div @scroll.passive="handleScroll" class="overflow-y-auto w-full" ref="scrollContainer" :style="{ maxHeight: maxHeight }">
    <template v-if="value.length">
      <slot></slot>
    </template>
    <NoData :type="NoDataType" :loading="loading" v-if="!value.length"></NoData>
    <!-- <div
      v-if="noMore && value.length"
      class="py-4 text-sm text-center text-gray-500"
    >
      <span>{{ noMoreText }}</span>
    </div> -->
    <!-- 
        <InfiniteScroll
              :loading="loading"
              :no-more="noMore"
              @load-more="loadMoreData"
              v-model="evaluateList"
            >
            </InfiniteScroll>
loadMoreData() {
      if (!this.loading && !this.noMore) {
        this.page++;
        this.getEvaluateList();
      }
    },
    async getEvaluateList() {
      this.loading = true;
      try {
        const res = await this.$axios.get(`/api/comment/index`, {
          params: {
            page: this.page,
            id: this.detailInfo.id,
            limit: this.limit,
            score: this.tabId,
          },
        });
        // 如果是第一页，直接替换数据
        if (this.page === 1) {
          this.evaluateList = res || [];
        } else {
          // 否则追加数据
          this.evaluateList = [...this.evaluateList, ...(res || [])];
        }
        // 判断是否还有更多数据
        this.noMore = res.length === 0 || res.length < this.limit;
      } catch (err) {
        console.error("获取评价列表失败:", err);
        this.evaluateList = [];
        this.noMore = true;
      } finally {
        this.loading = false;
      }
    },
     -->
  </div>
</template>
<script>
  export default {
    name: 'InfiniteScroll',
    props: {
      NoDataType: {
        type: String,
        default: 'empty'
      },
      loading: {
        type: Boolean,
        default: true
      },
      noMore: {
        type: Boolean,
        default: false
      },
      distance: {
        type: Number,
        default: 200
      },
      loadingText: {
        type: String,
        default: '加载中...'
      },
      noMoreText: {
        type: String,
        default: '没有更多了'
      },
      maxHeight: {
        type: String,
        default: null // 不强制设置高度
      },
      value: {
        type: [Array],
        default: ''
      }
    },
    mounted() {
      /*
<InfiniteScroll
  :loading="loading"
  :no-more="noMore"
  @load-more="loadMoreData"
></InfiniteScroll>
*/
      // 添加窗口滚动监听
      window.addEventListener('scroll', this.handleWindowScroll)
    },
    beforeDestroy() {
      // 移除监听
      window.removeEventListener('scroll', this.handleWindowScroll)
    },
    methods: {
      handleWindowScroll() {
        // 检查是否滚动到底部
        const scrollY = window.scrollY
        const innerHeight = window.innerHeight
        const offsetHeight = document.body.offsetHeight
        if (scrollY + innerHeight >= offsetHeight - this.distance && !this.loading && !this.noMore) {
          this.$emit('load-more')
        }
      }
    }
  }
</script>
